/*
 * @Author: yuanxiang 
 * @Date: 2018-05-12 09:28:34 
 * @Last Modified by: wangguanqing
 * @Last Modified time: 2018-05-21 18:34:54
 */
<template>
<bg-lay-out :hideTopBar="true" :widthSize="true" :hideMarginLeft="true" :background="'#22213b'" :hideMask="true">
<div slot="main" class="components-container balanceMain" style="width:1920px;min-height:1080px">
        <p class="z_topTitleCon">   
            <span class="z_topTitle">资产负债表</span>
            <span class="dateCircle">
              <el-date-picker :editable="false" :clearable="false" @change="dateChange" v-model="month" type="month" placeholder="选择月" class='week-con'></el-date-picker>
            </span>
            <!-- <el-button type="success"  @click="exportExcel">导出</el-button>  -->
            <el-select v-model="value" style="width:100px;" @change="onChangePlate">
              <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              </el-option>
            </el-select>
            &nbsp;&nbsp;&nbsp;
            <el-select v-model="company" filterable style="width:100px;" @change="onChangeCompany">
              <el-option
              v-for="item in companies"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              </el-option>
            </el-select>
        </p>
        <div class='chart-container' style="margin-top:10px;">
            <el-row :gutter="20" style="padding-bottom:2em">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" class="zdgzTable lrfpTable">
                  <div class="balanceTable">
                    <el-table 
                    id="money-table"
                    :data="tableData" 
                    :row-class-name="tableRowClassName"
                      header-row-class-name="myHeadRow" 
                      header-cell-class-name="myHeaderCell"
                      :cell-class-name="tableCellClassName" 
                      class="myTableCss">
                        <el-table-column prop="lineNum" label="行次" header-align="center" align="center" width="100">
                        </el-table-column>
                        <el-table-column prop="assets" label="资产" header-align="left" align="left" width="230">
                        </el-table-column>
                        <el-table-column prop="finalBalance" label="期末余额(元)" header-align="left" align="left">
                        </el-table-column>
                        <el-table-column prop="beginBalance" label="年初余额(元)" header-align="left" align="left">
                        </el-table-column>
                        <el-table-column prop="lineNumForLiabilities" label="行次" header-align="left" align="left" width="100">
                        </el-table-column>
                        <el-table-column prop="liabilities" label="负债和所有者权益(或股东权益)" header-align="left" align="left" width="300">
                        </el-table-column>
                        <el-table-column prop="finalBalanceForLiabilities" label="期末余额(元)" header-align="left" align="left">
                        </el-table-column>
                        <el-table-column prop="beginBalanceForLiabilities" label="年初余额(元)" header-align="left" align="left">
                        </el-table-column>
                      </el-table>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
  </bg-lay-out>
</template>
<script>
import bgLayOut from "@/components/bgLayOut/index";
import { CompanyInfo, PlateInfo, AssetsInfo } from "@/api/finance/index";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      tableData: [],
      month: new Date(),
      options: [],
      value: "",
      companies: [],
      company: ""
    };
  },
  components: {
    bgLayOut
  },
  methods: {
    exportExcel() {
      /* generate workbook object from table */
      var wb = XLSX.utils.table_to_book(document.querySelector("#money-table"));
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        type: "binary"
      });
      try {
        FileSaver.saveAs(
          new Blob([this.s2ab(wbout)], { type: "application/octet-stream" }),
          "资产负债表.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    s2ab(s) {
      if (typeof ArrayBuffer !== "undefined") {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      } else {
        var bufs = new Array(s.length);
        for (var a = 0; a !== s.length; ++a) bufs[a] = s.charCodeAt(a) & 0xff;
        return bufs;
      }
    },
    onChangePlate(res) {
      this.getCompanies({ plateId: this.value });
      this.fetchData();
    },
    onChangeCompany(res) {
      this.fetchData();
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 7) {
      // return "myCellConBlue";
      // } else {
      return "myCellCon";
      // }
    },
    tableRowClassName(row, index) {
      // if (this.value === "2") return;
      if (row.row.isNewDeal) {
        return "danger-row";
      } else {
        return "my-table-row";
      }
    },
    dateChange() {
      this.fetchData();
    },
    async fetchData() {
      try {
        var month = new Date(this.month).getMonth() + 1;
        var year = new Date(this.month).getFullYear();
        var allDays = new Date(year, month, 0).getDate();
        var endTime = year + "-" + month + "-" + allDays;
        var startTime = year + "-" + month + "-" + "1";
        // 获取全部数据
        var d = {
          startTime: startTime,
          endTime: endTime,
          companyId: this.company,
          plateId: this.value
        };
        const res = await AssetsInfo(d);
        if (res) {
          res.data.result.forEach(item => {
            item.finalBalance = Number(item.finalBalance).toLocaleString()
            item.beginBalance = Number(item.beginBalance).toLocaleString()
            item.finalBalanceForLiabilities = Number(item.finalBalanceForLiabilities).toLocaleString()
            item.beginBalanceForLiabilities = Number(item.beginBalanceForLiabilities).toLocaleString()
          })
          this.$set(this, "tableData", res.data.result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    async getPlates(data) {
      try {
        const res = await PlateInfo(data);
        this.options = res.data.result;
      } catch (error) {
        console.log(error);
      }
    },
    async getCompanies(data) {
      try {
        const res = await CompanyInfo(data);
        this.companies = res.data.result;
      } catch (error) {
        console.log(error);
      }
    }
  },

  mounted() {
    var params = {};
    this.getPlates(params);
    this.getCompanies({ plateId: "" });
    this.fetchData();
  }
};
</script>

<style lang="scss">
@import "../../../../../styles/element-ui/table/zdgzTable.scss";
@import "../../../../../styles/element-ui/pagination/zdgzPagination.scss";
@import "../../../../../styles/element-ui/date/dateCircle.css";
@import "../../../../../styles/element-ui/select.css";
@import "../../../../../styles/pages/finance/_balance";
</style>


